<template>
  <div class="list-page">
    <div class="central">
      <div class="title">
        <h1>总有些惊奇的际遇 比方说当我遇见你</h1>
      </div>
      
      <div class="row central central-800">
        <div class="card col-lg-12 col-md-12 col-sm-12 col-sm-x-12">
          <div class="list-content animated fadeInUp">
            <div class="lovelist">
              <div 
                v-for="event in loveEvents" 
                :key="event.id" 
                class="event-item cike"
                @click="toggleEventImage(event)"
              >
                <div class="event-header">
                  <i 
                    class="iconfont" 
                    :class="event.icon ? 'icon-chenggong2 com' : 'icon-chenggong2 air'"
                  ></i>
                  <span>{{ event.eventname }}</span>
                  <svg 
                    v-if="event.imgurl" 
                    class="icon" 
                    aria-hidden="true"
                  >
                    <use xlink:href="#icon-tupian"></use>
                  </svg>
                </div>
                
                <div 
                  v-if="event.imgurl && event.showImage" 
                  class="event-image"
                >
                  <img 
                    :src="event.imgurl" 
                    :alt="event.eventname"
                    class="spotlight"
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListView',
  data() {
    return {
      loveEvents: [
        {
          id: 1,
          eventname: "初次相遇",
          icon: true,
          imgurl: "https://img.gejiba.com/images/b0d44ed67e25235f552aacbe32d81b5c.jpg",
          showImage: false
        },
        {
          id: 2,
          eventname: "第一次约会",
          icon: true,
          imgurl: "",
          showImage: false
        },
        {
          id: 3,
          eventname: "第一次旅行",
          icon: false,
          imgurl: "https://img.gejiba.com/images/f4b1de284e9dcb9057553642d9fee764.png",
          showImage: false
        },
        {
          id: 4,
          eventname: "重要纪念日",
          icon: true,
          imgurl: "",
          showImage: false
        },
        {
          id: 5,
          eventname: "难忘的时刻",
          icon: false,
          imgurl: "https://img.gejiba.com/images/7c5f1a655788c0d6ff0cae50232dde65.jpg",
          showImage: false
        }
      ]
    }
  },
  methods: {
    toggleEventImage(event) {
      // 如果事件有图片，则切换图片显示状态
      if (event.imgurl) {
        event.showImage = !event.showImage;
      }
    }
  }
}
</script>

<style scoped>
.list-page {
  padding: 2rem 0;
}

.title {
  text-align: center;
  margin-bottom: 2rem;
}

.title h1 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.list-content {
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.lovelist {
  width: 100%;
}

.event-item {
  border-bottom: 1px solid #ddd;
  padding: 1rem 0;
  cursor: pointer;
}

.event-item:last-child {
  border-bottom: none;
}

.event-item:hover {
  cursor: pointer;
  cursor: url(../assets/cursors/hover.cur), pointer;
}

.event-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.iconfont {
  font-size: 1.2rem;
}

.iconfont.com {
  color: #28a745;
}

.iconfont.air {
  color: #ffc107;
}

.event-header span {
  flex: 1;
  font-size: 1.1rem;
  color: #333;
}

.icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.3em;
  fill: currentColor;
  overflow: hidden;
  color: #007bff;
}

.event-image {
  margin-top: 1rem;
  text-align: center;
}

.event-image img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* 自定义光标样式的替代方案 */
.event-item:hover {
  opacity: 0.9;
}

@media (max-width: 768px) {
  .title h1 {
    font-size: 1.5rem;
  }
  
  .event-header span {
    font-size: 1rem;
  }
}
</style>
